<!-- src/components/Calendar/CurrentTimeIndicator.vue -->
<template>
  <div
    v-if="shouldShow && topPosition >= 0"
    class="current-time-indicator"
    :class="{'label-indicator': showLabel}"
    :style="indicatorStyle"
  >
    <!-- 左侧圆点 -->
    <div class="time-dot"></div>
    <!-- 水平线（只在网格区域显示） -->
    <div v-if="!showLabel" class="time-line"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'

interface Props {
  // 当前显示的日期（用于判断是否显示指示器）
  currentDate: Date
  // 时间槽数组（用于计算位置）
  timeSlots: string[]
  // 是否显示左侧时间标签区域的指示器
  showLabel?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  showLabel: false
})

// 当前时间
const currentTime = ref(new Date())

// 更新当前时间
const updateCurrentTime = () => {
  currentTime.value = new Date()
}

// 定时器
let timer: number | null = null

// 计算是否应该显示（只在当前日期显示）
const shouldShow = computed(() => {
  const now = currentTime.value
  const current = props.currentDate
  
  // 检查是否是同一天
  return (
    now.getFullYear() === current.getFullYear() &&
    now.getMonth() === current.getMonth() &&
    now.getDate() === current.getDate()
  )
})

// 计算当前时间在网格中的垂直位置（像素）
// 网格索引直接对应时间段：
// 索引0 -> 00:00-01:00
// 索引1 -> 01:00-02:00
// ...
// 索引20 -> 20:00-21:00
// 索引23 -> 23:00-00:00
// hour 直接对应网格索引
const topPosition = computed(() => {
  if (!shouldShow.value) return -1
  
  const now = currentTime.value
  const hour = now.getHours()
  const minute = now.getMinutes()
  
  // hour 直接作为网格索引（与点击网格时的逻辑一致）
  // hour=0 -> 网格索引0 (00:00-01:00)
  // hour=20 -> 网格索引20 (20:00-21:00)
  const gridIndex = hour
  
  // 如果不在网格范围内，不显示
  if (gridIndex < 0 || gridIndex >= 24) return -1
  
  // 计算在小时内的分钟偏移（60px 是每个时间段的高度）
  // minuteOffset = (分钟数 / 60) * 60px
  const minuteOffset = (minute / 60) * 60
  
  // 总位置 = 网格索引 * 60px + 分钟偏移
  // 加上 upperBlock 的高度（7px）
  // 例如：当前时间 20:27 -> 网格索引20 -> 位置 = 20 * 60 + 27 + 7 = 1234px
  return gridIndex * 60 + minuteOffset + 7
})

// 指示器样式
const indicatorStyle = computed(() => {
  return {
    top: `${topPosition.value}px`
  }
})

onMounted(() => {
  // 每分钟更新一次时间
  updateCurrentTime()
  timer = window.setInterval(updateCurrentTime, 60000) // 每分钟更新
})

onUnmounted(() => {
  if (timer !== null) {
    clearInterval(timer)
  }
})
</script>

<style scoped>
.current-time-indicator {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 100;
  display: flex;
  align-items: center;
  pointer-events: none;
  overflow: visible; /* 确保圆点可以显示 */
}

.time-dot {
  width: 8px;
  height: 8px;
  background: #f44336;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 0 1px rgba(244, 67, 54, 0.3);
  flex-shrink: 0;
  margin-left: -4px;
  position: relative; /* 确保定位上下文正确 */
  z-index: 101; /* 确保圆点在线上方 */
}

.time-line {
  flex: 1;
  height: 2px;
  background: #f44336;
  box-shadow: 0 1px 2px rgba(244, 67, 54, 0.3);
}

/* 时间标签区域的指示器样式 */
.label-indicator {
  right: auto;
  left: 0;
  width: 60px; /* 时间标签区域宽度 */
}

.label-indicator .time-dot {
  margin-left: auto;
  margin-right: 8px;
}
</style>

